<div class="data-analysis-container">
  <div class="data-analysis-left">
    <p>趋势异常</p>
    <div class="list-container">
      <div class="list-card" *ngFor="let item of leftTableListData"
           [style]="{transform:'translateY('+addTimes*-4+'px)'}" (mouseover)="startScrollFlag = false"
           (mouseleave)="startScrollFlag = true">
        <p>线路名称： <span>{{item.lineName}}</span></p>
        <p>站点名称： <span>{{item.siteName}}</span></p>
        <p>设备名称： <span>{{item.deviceName}}</span></p>
        <p>数据类型： <span>{{item.dataType}}</span></p>
        <p>创建时间： <span>{{item.createTime}}</span></p>
        <button nz-button nzType="primary">查看</button>
      </div>
    </div>
  </div>
  <div class="data-analysis-right">
    <div echarts [options]="chartOption" (chartInit)="chartInit($event)" class="data-analysis-chart"></div>
    <div class="data-analysis-table">
      <p>历史趋势异常</p>
      <div class="data-analysis-table-bar">
        <div><span>搜索关键词：</span><input nz-input placeholder="输入关键词搜索"/></div>
        <div><span>选择日期：</span><nz-date-picker nzPlaceHolder="请选择日期"></nz-date-picker></div>
        <button nz-button style="background:'green';color:'#fff';border-color:'transparent'">查询</button>
      </div>
      <nz-table #lineTable [nzShowSizeChanger]="true" [nzShowQuickJumper]="true"
                [nzData]="tableData">
        <thead>
        <tr>
          <th>线路</th>
          <th>站点</th>
          <th>设备</th>
          <th>数据类型</th>
          <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of lineTable.data">
          <td>{{ data.lineName}}</td>
          <td>{{ data.siteName }}</td>
          <td>{{ data.device }}</td>
          <td>{{ data.dataType }}</td>
          <td>{{ data.createTime}}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>


